<template>
  <div class="topic">
    <div class="panel-content">
      <div class="panel-list" @click="goInfo" v-for="item in topicArr" :key="item.id">
        <div class="card_header">
          <div class>{{item.title}}</div>
          <img :src="headerImg" width="80" height="80" style="object-fit: cover;">
        </div>
        <div class="card_header">
          <div class="min-size">{{item.name}}</div>
          <div class="min-size">
            <span>浏览{{item.browseNum}}人</span>
            <span>评论{{item.reviewNum}}人</span>
          </div>
        </div>
        <div class="card_footer">
          <div class="tip">{{item.totalAll}}人讨论</div>
          <div v-for="thumb in headerArr" :key="thumb" class="rigth">
            <img :src="thumb" class="arrImg">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Icon, Cell, Toast, Panel } from 'vant'
export default {
  components: {
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [Panel.name]: Panel
  },
  data() {
    return {
      headerImg:
        'http://n.sinaimg.cn/translate/567/w781h586/20190425/KPde-hvvuiyn9279369.jpg',
      headImg:
        'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190329/9a45702df92e4abcbafe7253b7e949f0.jpeg',
      headerArr: [
        'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190329/9a45702df92e4abcbafe7253b7e949f0.jpeg',
        'http://n.sinaimg.cn/translate/567/w781h586/20190425/KPde-hvvuiyn9279369.jpg'
      ],
      topicArr: [
        {
          id: '0',
          title: '大多数人们喜欢的户型有哪些?',
          name: '@测试',
          browseNum: 50,
          reviewNum: 20,
          totalAll: 666
        },
        {
          id: '1',
          title: '学区房到底有什么好处?',
          name: '@张某某',
          browseNum: 150,
          reviewNum: 120,
          totalAll: 999
        }
      ]
    }
  },
  computed: {
    number: function() {
      return this.headerArr.length
    }
  },
  methods: {
    clickNuu() {
      Toast('关注中....')
    },
    goInfo() {
      this.$router.push('/topicInfo')
    }
  }
}
</script>
<style lang="less" scoped>
.topic {
  font-size: 16px;
  .panel-content {
    background: #fff;
    width: 100%;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
    .panel-header {
      padding: 10px 0;
      font-size: 16px;
      box-sizing: border-box;
    }
    .panel-list {
      margin-bottom: 20px;
      border: 1px solid #e5e5e5;
      padding: 10px 10px;
      box-sizing: border-box;
      .card_header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
      .card_footer {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        font-size: 14px;
        padding: 10px 0;
        box-sizing: border-box;
        border-top: 1px solid #e5e5e5;
        margin-top: 5px;
      }
    }
  }
}
.min-size {
  font-size: 12px;
  color: #e3e3e3;
  margin-top: 10px;
}
.arrImg {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.tip {
  margin-right: 15px;
}
@-webkit-keyframes rightan {
  from {
    bottom: 0%;
    opacity: 0;
  }
  to {
    bottom: 10%;
    opacity: 1;
  }
}
.rightan {
  -webkit-animation: rightan 1s infinite;
  -webkit-animation-fill-mode: both;
  text-align: center;
  span {
    font-size: 12px;
    color: #e3e3e3;
  }
}
</style>


